<template>
	<view class="container page-user-address">
		<view class="module-address">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="item-name">
					{{ item.name }} {{ item.phone }}
					<text v-show="item.isDefault" class="label-default">默认</text>
				</view>
				<view class="item-address">{{ item.address }}</view>
				<view class="item-footer">
					<label class="item-radio" @tap="handleRadio(index)">
						<radio :value="item.id" :checked="index === currentRadio" />
						设为默认
					</label>
					<view class="action">
						<text class="iconfont iconbianji"></text>
						编辑
					</view>
					<view class="action" @tap="handleDelete(item)">
						<text class="iconfont iconshanchu"></text>
						删除
					</view>
				</view>
			</view>
		</view>
		<view class="fixed-bottom module-button">
			<button type="main" class="button-add" @tap="handleAddEdit('add')">
				添加新收货信息
			</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentRadio: 0,
			list: [
				{
					name: '庄',
					phone: '13726210119',
					address: '广东省广州市黄埔区科学园',
					isDefault: true,
					id: '1',
				},
				{
					name: '庄',
					phone: '13726210119',
					address: '广东省广州市黄埔区科学园',
					isDefault: false,
					id: '2',
				},
				{
					name: '庄',
					phone: '13726210119',
					address: '广东省广州市黄埔区科学园',
					isDefault: false,
					id: '3',
				},
			],
		};
	},
	onLoad() {},
	methods: {
		handleDelete() {
			uni.showModal({
				title: '',
				content: '确认删除该收货信息吗 ？',
				success: (res) => {
					if (res.confirm) {
						window.console.log('用户点击确定');
					} else if (res.cancel) {
						window.console.log('用户点击取消');
					}
				},
			});
		},
		handleAddEdit() {
			uni.navigateTo({
				url: '../address-add/index',
			});
		},
		handleRadio(index) {
			this.currentRadio = index;
		},
	},
};
</script>

<style lang="scss">
.page-user-address {
	padding: 0 0 100rpx;
}
.module-address {
	.label-default {
		color: #f19736;
		font-size: 24rpx;
		padding: 2rpx 12rpx;
		border-radius: 3px;
		border: 1px solid #f19736;
		margin-left: 40rpx;
	}
	.item {
		padding: $uni-spacing-lg;
		border-bottom: 3px solid #f5f5f5;
	}
	.item-name {
		margin: 0 0 $uni-spacing-base;
		font-size: 30rpx;
	}
	.item-address {
		font-size: 26rpx;
		color: #888;
	}
	.item-footer {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: $uni-spacing-lg 0 0;
		color: #888;
	}
	.item-radio {
		flex: 1;
		font-size: 26rpx;
	}
	.action {
		padding: 0 14rpx;
		font-size: 26rpx;
		.iconfont {
			margin-right: 6rpx;
		}
		.iconbianji {
			font-size: 28rpx;
		}
	}
}
.module-button {
	padding: 16rpx 60rpx;
	border-top: 1px solid #eee;
	.button-add {
		margin: 0 auto;
		padding: 2rpx 0;
		font-size: 30rpx;
		border-radius: 18px;
	}
}
</style>
